import React from 'react';
import './modal.less';

class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Modal';
        this.state = {

        }
    }
    closeModal(){
        this.props.onCloseModal()
    }
    handleConfirm(){
        this.props.handleConfirm()
    }
    render() {
        var type=this.props.type
        var height=this.props.height
        var width=this.props.width
        if(type==2){
            height=200;
        }
        return <div className="modal" style={this.props.visible?{display:"block"}:{display:"none"}}>
            <div className="modal-container" style={{
                width: width+"px",
                height: height+"px",
                marginTop: -height/2+"px",
                marginRight: -width/2+"px"}
                }>
                <div className="modal-head">
                    <div className="modal-title" >{this.props.title}</div>
                    <div className="modal-close"><span className="ion-close-round" onClick={this.closeModal.bind(this)}></span></div>
                </div>
                <div className="modal-body">
                    {this.props.children}
                </div>
                {this.props.type==2?<div className="modal-bottom" style={this.props.type==2?{display:"block"}:{display:"none"}}>
                    <input className="btn-cancel" type="button" value="取消" onClick={this.closeModal.bind(this)}/>
                    <input className="btn-confirm" type="button" value="确定" onClick={this.handleConfirm.bind(this)}/>
                </div>:null}
            </div>
            <div className="modal-mask" onClick={this.closeModal.bind(this)}></div>
        </div>
    }
}
Modal.defaultProps={
    type:1,
    width: 400,
    height: 300,
    close: true,
    backClose: true
}

export default Modal
